<template>
  <div class="chart-block chart-pro">
    <chart-wrapper :loading="loading" :show="show">
      <div :class="[layout]" class="content">
        <div class="chart">
          <!--- 圆图统计前缀插槽 -->
          <slot name="chart-prepend"></slot>
          <ui-echarts-basics
            :option="option"
            :width="width"
            :height="height"
            :merge="merge"
            :tooltip="tooltip"
          ></ui-echarts-basics>
        </div>
        <div class="vertical-equal-division info">
          <div v-if="layout === 'two-item'">
            <div
              :class="['color' + (index / 2 + 1)]"
              :key="index"
              class="vertical-equal-division-row item"
              v-for="(item, index) in list"
            >
              <el-row>
                <el-col :span="12">{{ item.name }}</el-col>
                <el-col :span="12">{{ item.percent }}%</el-col>
              </el-row>
            </div>
          </div>

          <!-- 普通饼图 -->
          <div v-else-if="option.series && option.series[0].roseType != 'area'">
            <div
              :class="['color' + (index / 2 + 1)]"
              :key="index"
              class="vertical-equal-division-row item"
              v-for="(item, index) in option.series[0].data"
              v-if="item.name"
            >
              <el-row>
                <el-col :span="12">
                  <p :title="item.name" class="name">{{ item.name }}</p>
                </el-col>
                <el-col :span="12">
                  <p
                    :title="item.percent + '%'"
                    class="percent color-text-secondary"
                  >
                    {{ item.percent }}%
                  </p>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 丁格尔玫瑰图,如：预约首页 > 旅游资源统计 -->
          <div v-else-if="option.series && option.series[0].roseType == 'area'">
            <div
              :class="['color-rose' + index]"
              :key="index"
              class="vertical-equal-division-row item"
              v-for="(item, index) in option.series[0].data"
              v-if="item.name"
            >
              <el-row>
                <el-col :span="12">
                  <p :title="item.name" class="name">{{ item.name }}</p>
                </el-col>
                <el-col :span="12">
                  <p
                    :title="item.percent + '%'"
                    class="percent color-text-secondary"
                  >
                    {{ item.percent }}%
                  </p>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </chart-wrapper>
  </div>
</template>
<script>
import ChartWrapper from "@/components/reservation/chart-wrapper";
import UiEchartsBasics from "@/components/reservation/ui-echarts-basics.vue";

export default {
  name: "ui-echarts-pie",
  components: { ChartWrapper, UiEchartsBasics },
  props: {
    title: {
      type: String,
      default: ""
    },
    titleTip: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    },
    loading: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: "" // 取值: 空, one-line, two-line
    },
    unit: {
      type: String,
      default: "人次"
    },
    // echarts的配置项
    option: {
      type: Object,
      default: _ => {}
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    merge: {
      type: Boolean,
      default: false
    },
    tooltip: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show() {
      return (
        Array.isArray(this.option.series) &&
        this.option.series.length > 0 &&
        this.option.series[0].data.length > 0
      );
    }
  },
  data() {
    return {
      resizeTimer: null, //resize触发间隔
      init: false,
      config: {},
      target: null,
      autoTip: null,
      aaa: {}
    };
  },
  watch: {
    option: {
      handler(v) {
        this.aaa = v;
      }
    }
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      console.log(this.option);
    });
  },
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
@import "./vars.module.scss"; //引入方式

$block-height: 100%;
$header-height: 40px;
$content-height: 100%;

.chart-block {
  //height: $block-height;
  width: 100%;
  height: 100%;
}

.vertical-equal-division {
  display: flex;
  flex-direction: column;

  .vertical-equal-division-row {
    flex: auto;
  }
}

::v-deep .content {
  display: flex;
  width: 100%;
  height: $content-height;

  .chart {
    width: 50%;
    height: $content-height;

    .echarts {
      width: 100%;
      height: calc(100% - 25px);
    }
  }

  .info {
    flex: 1;
    width: 50%;
    padding-left: 50px;
    font-size: $font-size-small;
    line-height: 24px;
    color: $color-text-primary;
    display: flex;
    justify-content: center;

    .item {
      width: 100%;
      padding-left: 14px;
      margin-bottom: 8px;

      &:before {
        content: "";
        display: block;
        height: 10px;
        width: 10px;
        background: $chart-color1;
        float: left;
        border-radius: 2px;
        margin-top: 7px;
        margin-left: -22px;
      }

      &.color1:before {
        background: $chart-color1;
      }

      &.color2:before {
        background: $chart-color2;
      }

      &.color3:before {
        background: $chart-color3;
      }

      &.color4:before {
        background: $chart-color4;
      }

      &.color5:before {
        background: $chart-color5;
      }

      &.color-rose0:before {
        background: #5470c6;
      }
      &.color-rose1:before {
        background: #91cc75;
      }
      &.color-rose2:before {
        background: #fac858;
      }
      &.color-rose3:before {
        background: #ee6666;
      }
      &.color-rose4:before {
        background: #73c0de;
      }
      &.color-rose5:before {
        background: #3ba272;
      }
      &.color-rose6:before {
        background: #fc8452;
      }
      &.color-rose7:before {
        background: #9a60b4;
      }

      p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .name {
        color: #676767;
      }
    }
  }

  /* 单行布局 */
  &.one-line {
    .info {
      padding-left: 10px;

      .item {
        display: flex;
        padding-left: 0;

        &:before {
          margin-left: 0;
        }
      }

      .value,
      .percent {
        text-align: right;
      }

      .name {
        width: 50px;
        margin-left: 5px;
      }

      .value {
        flex: 1;
      }

      .percent {
        width: 56px;
      }
    }
  }

  /* 二行布局 */
  &.two-line {
    .info {
      padding-left: 15px;

      .name {
        display: block;
      }

      .value,
      .percent {
        display: inline-block;
        line-height: 14px;
      }

      .value {
        width: 80px;
      }
    }
  }

  /* 三行布局 */
  &.three-line {
    .info {
      padding-left: 30px;

      .percent {
        margin-left: 8px;
      }
    }
  }
}
</style>
